<template>
  <van-panel
    :title="item.order_time"
    :status="item.status_text"
    :name="item.id"
    class="order-panel van-hairline--surround"
    @click.native="onClick"
  >
    <van-card
      :thumb="product.thumb"
      v-for="product in item.products"
      :key="product.id"
      class="van-hairline-bottom"
    >
      <div
        slot="title"
        class="order-panel__title"
      >
        <span class="van-multi-ellipsis--l2">{{product.name}}</span>
        <price :value="product.amount"></price>
      </div>
      <van-cell-group
        slot="bottom"
        class="order-panel__sku"
        v-if="product.goods.length>0"
        :border="false"
      >
        <van-cell
          :title="sku.sku"
          :value="'x'+sku.num"
          v-for="sku in product.goods"
          :key="sku.id"
          :border="false"
        />
      </van-cell-group>
    </van-card>
    <template #footer>
      <div class="order_amount">
        <div class="arrow arrow-top"></div>
        共{{goodsTotal}}件商品 支付金额
        <price
          :value="item.pay"
          color="#ff6600"
        />
      </div>
      <van-button
        size="small"
        v-for="(btn,label) in item.handle"
        :key="btn.id"
        :type="btn.type"
        @click.stop="onClickHandle(label,item.id)"
      >
        {{btn.text}}
      </van-button>
    </template>
  </van-panel>
</template>
<script>
import { Icon, Cell, Button, Card, Panel, CellGroup } from 'vant'
import Price from '@/components/price'
export default {
  components: {
    Price,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Card.name]: Card,
    [Panel.name]: Panel
  },
  name: 'OrderCard',
  props: {
    item: Object,
    tpl: String
  },
  data () {
    return {
      active: false
    }
  },
  computed: {
    goodsTotal () {
      return this.item.products.reduce((amount, item) => {
        return amount + item.total
      }, 0)
    },
    format () {
      if (this.tpl) {
        return this.tpl
      }
      return this.data.format
    },
    className () {
      return 'activity-cell__' + this.format
    },
    stats () {
      let stats = []
      stats.push(this.data.category.name)
      stats.push(this.data.publishTime)
      return stats.join(' | ')
    },
    label () {
      if (this.format === 'default') {
        return this.stats
      }
      return ''
    },
    babelTips () {
      if (this.data.format === 'gallery' && this.data.picture_nums > 0) {
        return this.data.picture_nums + '图'
      } else if (this.data.format === 'video' && this.data.duration) {
        return this.data.duration
      }
      return false
    },
    thumb () {
      let albums = this.data.pictures
      if (albums.length > 0 && albums.length < 3) {
        return albums.shift()
      }
      return false
    },
    link () {
      return this.data.link
    }
  },
  methods: {
    onClick () {
      console.log(this.item)
      this.$emit('click', this.item)
      // this.pushNativelink(this.link)
    },
    onClickHandle (label, id, index) {
      console.log(label, id, index)
      if (label === 'cancel') {
        this.$dialog
          .confirm({
            message: '您确认要取消当前订单吗？'
          })
          .then(() => {
            this.axios.post('/shop/order/cancel', { id: id }).then(response => {
              this.$toast(response.data.msg)
              if (response.data.status) {
                this.list.splice(index, 1)
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      } else if (label === 'pay') {
        this.$emit('pay', this.item)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.order-panel {
  margin-top: 10px;
  &__title {
    display: flex;
    justify-content: space-between;
    span {
      line-height: 20px;
      max-height: 40px;
      padding-right: 8px;
    }
  }
  &__sku {
    margin-top: 10px;
    /deep/ .van-cell {
      padding: 0;
      font-size: 12px;
      &__title {
        span {
          font-size: 80%;
          color: #aaa;
          font-weight: 300;
        }
      }
    }
  }

  /deep/ .van-panel__header-value {
    font-size: 12px;
    color: #ff6600;
  }
  /deep/ .van-panel__footer {
    text-align: right;
    padding-top: 44px;
    margin-top: 10px;
    .van-button {
      margin-left: 5px;
    }
    .order_amount {
      position: absolute;
      right: 15px;
      top: 0;
      padding: 10px 0;
      .arrow {
        left: auto;
        right: 10px;
        top: -10px;
      }
    }
  }

  /deep/ .van-card {
    background: transparent;
    &__title {
      font-size: 14px;
      line-height: 20px;
      max-height: 40px;
    }
    &__desc {
      padding: 5px 0;
      color: #999;
      max-height: 40px;
      line-height: 15px;
    }
  }
}
</style>
